<script setup lang="ts">
import Sidebar from './components/Sidebar/index.vue'
import Header from './components/Header/index.vue'
import Breadcrumb from './components/Breadcrumb/index.vue'

defineOptions({
  name: 'BasicLayout'
})
</script>

<template>
  <div class="basic-layout">
    <!-- 侧边栏 -->
    <Sidebar class="sidebar" />
    
    <!-- 主内容区域 -->
    <div class="main-container">
      <!-- 头部 -->
      <Header class="header" />
      
      <!-- 内容区域 -->
      <div class="content-container">
        <!-- 面包屑导航 -->
        <Breadcrumb />
        
        <!-- 页面内容 -->
        <div class="content-wrapper">
          <router-view v-slot="{ Component }">
            <transition name="fade-transform" mode="out-in">
              <keep-alive>
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.basic-layout {
  width: 100%;
  height: 100%;
  display: flex;
  
  .sidebar {
    flex-shrink: 0;
  }
  
  .main-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    
    .header {
      flex-shrink: 0;
    }
    
    .content-container {
      flex: 1;
      padding: $spacing-md;
      overflow: auto;
      background-color: $bg-color;
      
      .content-wrapper {
        background-color: #fff;
        padding: $spacing-md;
        border-radius: $border-radius-base;
        min-height: calc(100% - 40px - #{$spacing-md * 2});
      }
    }
  }
}
</style> 